<template>
  <div style="color: black;">
    <div style="margin-bottom: 20px;">送货清单:</div>
    <el-row v-for="( item, index) in goods" :key="index" style="padding: 1%; ">
      <el-col :span="15">
        <div style="display: flex; margin-bottom: 20px;">
          <el-image style="width: 90px; height: 90px; padding:0 2% ;" :src="item.product_url1"></el-image>
          <div>
            <p>{{ item.product_name }}</p>
            <p style="color: #AA8764;" v-if="JSON.parse(item.product_specs.substring(0,
              item.product_specs.length)).SpecsSize">{{ JSON.parse(item.product_specs.substring(0,
    item.product_specs.length)).SpecsSize
    + '| '
    + JSON.parse(item.product_specs.substring(0, item.product_specs.length)).defaulteat
    + ' | ' + JSON.parse(item.product_specs.substring(0, item.product_specs.length)
    ).defaultware }}</p>

            <span style="color: #AA8764;" v-else>{{ JSON.parse(item.product_specs.substring(0,
              item.product_specs.length)).data_weight }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="3">{{ item.out_price }}/件</el-col>
      <el-col :span="3">X{{ item.pay_amount }}</el-col>
      <el-col :span="3" style="color: #AA8764;">￥{{ item.pay_amount * JSON.parse(item.product_specs.substring(0,
        item.product_specs.length)).product_price }}</el-col>
    </el-row>
    <div>
      <span>支付方式:</span>
      <ul class="sizelist">
        <li v-for="(size, index) in sizelist" :class="{ 'default': activeSize === index }" :key="index">
          <a @click="SpecsSize(index, (size))">{{ size }}</a>
        </li>
      </ul>
    </div>


    <div class="cart2">
      <ul>
        <li>
          已选商品件 {{ goods.length }}<span>|</span> 总金额<nbsp></nbsp> <span>￥{{ summation }} </span>
        </li>
        <li>配送费 <span>+￥0</span></li>
        <li>立即减 <span>-￥0</span></li>
        <li>实付 <b style=" font-size: 20px; color: #AA8764;">￥{{ summation }}</b>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KodaiSettle',
  props: {
    goods: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      sizelist: ['微信支付', '支付宝支付', '货到付现金', '货到POS', '银行卡支付'],
      activeSize: 0
    };
  },

  mounted () {

  },

  methods: {
    SpecsSize (index, size) {
      this.activeSize = index
    },
  },
  computed: {
    summation () {
      var total = 0
      this.goods.forEach(item => {
        total += JSON.parse(item.product_specs.substring(0, item.product_specs.length)).product_price * item.pay_amount
      })
      return total
    }
  }
};
</script>

<style lang="scss" scoped>
.sizelist {
  display: block;
  width: 100%;
  padding: 2%;
}

li.default {
  border: 1px solid #3C2314;
  background: url('@/assets/selected.png') bottom right no-repeat;
}

.sizelist li {
  display: inline-block;
  border: 1px solid #C8B49B;
  padding: 0 10px;
  min-width: 52px;
  margin-bottom: 10px;
  margin-right: 10px;
  text-align: center;
  height: 30px;
  line-height: 30px;
}

.cart2 {
  color: #3C2314;
  background: #FBFBFB;
  border: 1px solid #E1E1E1;

  ul {
    text-align: right;
    list-style: none;
    padding: 2%;

    li {
      padding: 0.5%;
    }
  }


}
</style>